<template>
  <view class="certification_wrap">
    <!--     #ifdef MP-WEIXIN-->
    <image
      :style="'top:'+(vuex_systemInfo[1].safeAreaInsets.top+10)+'px'"
      class="back"
      src="/static/shopIcon/left_white.png"
      @click="backFn"
    />
    <!--    #endif-->
    <image :src="vuex_imgPath+'/certification_banner.png'" class="banner" />
    <view class="certification_bg">
      <image :src="vuex_imgPath+'/certification_bg.png'" class="banner-bg" />
      <view class="certification_con">
        <view class="list_box list01">
          <view class="title">发票类型</view>
          <view class="hint">可开增值税专用发票/增值税普通发票</view>
        </view>
        <view class="list_box list02">
          <view class="title">专属客服</view>
          <view class="hint">一对一客服，贴心服务</view>
        </view>
        <view class="list_box list03">
          <view class="title">专属折扣</view>
          <view class="hint">更高的会员折扣价</view>
        </view>
        <view class="list_box list04">
          <view class="title">专属活动</view>
          <view class="hint">认证会员专享活动</view>
        </view>
        <button
          class="btn_certification btn-noborder"
          :plain="true"
          @click="upgradeFn"
        >
          {{ checking ? '信息审核中...' : '立即升级' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { navigateBackPrePage } from '@/common/common'
export default {
  name: 'Index',
  data() {
    return {
      checking: false,
    }
  },
  mounted() {
    if (this.vuex_memberCompanyInfo && Object.keys(this.vuex_memberCompanyInfo).length > 0 && this.vuex_memberCompanyInfo.examStatus == 10) { //exam_status :10 待审核    20审核成功
      this.checking = true
    }
  },
  methods: {
    upgradeFn() {
      if (!this.checking) {
        uni.navigateTo({
          url: `/ycPayments/upgrade/index`
        })
      }
    },
    backFn() {
      navigateBackPrePage()
    }
  }
}
</script>

<style scoped lang="scss">
.certification_wrap{
  .back{
    width: 48rpx;
    height: 48rpx;
    position: fixed;
    left: 32rpx;
  }
  .banner{
    display: block;
    width: 750rpx;
    height: 412rpx;
  }
  .certification_bg{
    position: relative;
    height: calc(100vh - 412rpx);
    .banner-bg{
      display: block;
      position: absolute;
      width: 750rpx;
      height: 66rpx;
      z-index:-1;
      top:0;
      left: 0;
    }
    .certification_con{
      width:710rpx;
      bottom:0;
      background-color: #fff;
      border-radius: 14rpx;
      margin: 0 auto;
      .list_box{
        height: 88rpx;
        padding: 48rpx 0 16rpx 152rpx;
        line-height: 34rpx;
        font-size: $uni-font-size-sm;
        .title{
          padding:12rpx 0 0;
          font-weight: bold;
        }
        .hint{
          color:$uni-grey-aaa;
        }
      }
      .list01{
        background:url("../static/image/certification_icon01.png") no-repeat 32rpx 48rpx/88rpx 88rpx;
      }
      .list02{
        background:url("../static/image/certification_icon02.png") no-repeat 32rpx 48rpx/88rpx 88rpx;
      }
      .list03{
        background:url("../static/image/certification_icon03.png") no-repeat 32rpx 48rpx/88rpx 88rpx;
      }
      .list04{
        background:url("../static/image/certification_icon04.png") no-repeat 32rpx 48rpx/88rpx 88rpx;
      }
      .btn_certification{
        position: absolute;
        bottom:50rpx;
        left:64rpx;
        height: 64rpx;
        width:624rpx;
        line-height: 64rpx;
        color: #fff;
        background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
        font-size: $uni-font-size-base;
      }
    }
  }
}

</style>
